<template>
  <ul class="nav">
    <li class="nav-item"
        v-for="nav in navItem"
        :key="nav.label"
        ref="navItem">
      <router-link class="slip" :to="nav.path" v-text="nav.label"></router-link>
      <div class="nav-child-div">
        <ul class="nav-child" v-if="nav.children && nav.children.length > 0">
          <li v-for="n in (nav.children)" :key="n.label">
            <router-link class="slip" :to="n.path" v-text="n.label" :key="n.path"></router-link>
          </li>
        </ul>
      </div>
      <!-- <ul class="nav-child">
        <li v-for="i in 6" :key="i">
          <router-link class="slip" :to="'/' + i" v-text="i"></router-link>
        </li>
      </ul> -->
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    navItem: {
      type: Array,
      default: () => []
    }
  },
  methods: {

  }
}
</script>

<style lang="stylus" scoped>
@import "~common/stylus/variable"
$_box-shadow = rgba(255, 255, 255, 0.7)

.nav
  float: right
  height: 100%
  line-height: $_height = 80px
  background: transparent
  padding: 0
  margin: 0
  &:after
    display: table
    content: ""
  .nav-item
    margin: 0
    float: left
    list-style: none
    cursor: pointer
    &:hover
      .nav-child-div
        display: block
    a
      text-decoration: none
      color: $color-text-rule
      display: block
      padding: 0 22px
      transition: color .3s ease
      text-align: center
      &.slip
        height: $_height - 2px
        border-bottom: 2px solid transparent
        transition: all .5s ease
      &.slip:hover
        border-bottom-color: $color-theme
      &.slip.router-link-active
        border-bottom-color: $color-theme
  .nav-child-div
    display: none
    position: absolute
    transform: translateX(calc(-50% + 54px))
    padding-top: 10px
  ul.nav-child
    background-color: $_box-shadow
    box-shadow: 0px 2px 10px 0 rgba(0, 0, 0, .5)
    &:after
      content: ''
      clear: both
      display: block
    li
      float: left
    // &:before
    //   content: ''
    //   width: 0
    //   height: 0
    //   border: 10px solid $_box-shadow
    //   border-color: transparent transparent $_box-shadow transparent
    //   position: absolute
    //   top: -20px
    //   left: 50%
    //   margin-left: -10px
</style>
